<template>
  <div class="about-wrapper">
    <div class="top">
      <div class="navs">
        <router-link
          v-for="link in navsLink"
          :key="link.link"
          :to="link.link"
        >{{ link.name }}</router-link>
      </div>
      <p class="text">
        <span>{{ text[0] }}</span>
      </p>
    </div>
    <div class="bottom">
      <div class="icp">
        <img src="home/gongan.png" alt>
        <span>ICP主体备案号:</span>
        <a
          href="http://beian.miit.gov.cn/"
          target="_blank"
        >浙ICP备17058757号-2</a>
      </div>
      <div class="allow-info-box">
        <p>
          <em class="width126">
            <a href="http://www.cyberpolice.cn/" target="_blank">
              <span>网络110报警服务</span>
            </a>
          </em>
        </p>
        <p>
          <a href="http://www.bjjubao.org/" target="_blank">
            <span>北京互联网违法和不良信息举报中心</span>
          </a>
        </p>
        <p>
          <a href="http://www.12377.cn/" target="_blank">
            <span>中国互联网举报中心</span>
          </a>
        </p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      navsLink: [
        {
          link: '/foot/about_us',
          name: '关于站长'
        },
        {
          link: '/foot/message',
          name: '留言吐槽'
        },
        {
          link: '/foot/application',
          name: '申请管理'
        },
        {
          link: '/foot/join_us',
          name: '加入我们'
        }
      ],
      text: ['唯有春风最相惜，一年一度一归来']
    }
  }
})
</script>

<style lang="scss" scoped>
.about-wrapper {
  border-top: 1px solid #dcdcdc;
  width: 100%;
  height: 15vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 40px;
  .top {
    flex: 0 0 30px;
    display: flex;
    justify-content: space-between;
    .text {
      color: #aaa;
    }
    .navs {
      a {
        font-size: 16px;
        margin-right: 20px;
      }
    }
  }
  .bottom {
    flex: 0 0 40px;
    display: flex;
    .icp {
      margin-right: 20px;
      display: flex;
      align-items: center;
    }
    .allow-info-box {
      display: flex;
      align-items: center;
    }
  }

}
</style>

